<template>
  <div class="scroll-wrap" ref="wrapper">
    <div>
      <!-- 下拉刷新 -->
      <div class="pulldown" v-show="dragTip.showLoding">
        <div class="clear">
          <div class="fl">
            <img width="16" src="../assets/scroll_load.gif" />
          </div>
          <div class="fl">{{dragTip.text}}</div>
        </div>
      </div>

      <slot></slot>

      <!-- 上拉加载 -->
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  props: {
    probeType: {
      type: Number,
      default: 1
    }
  },

  data() {
    return {
      dragTip: {
        text: "下拉刷新",
        showLoding: false
      },
      isDone: false
    };
  },

  mounted() {
    setTimeout(() => {
      console.log("setTimeout")
      this._initScroll();
    }, 200);
  },

  methods: {
    _initScroll() {
      console.log(this.$refs.wrapper)
      if (!this.$refs.wrapper) {
        return;
      }
      // better-scroll的初始化
      this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType
      });

      // 派发顶部下拉事件，用于下拉刷新
      this.scroll.on("scroll", pos => {
        console.log(123);
        console.log(pos.y);
        //显示下拉刷新loading
        this.dragTip.showLoding = true;

        if (pos.y > 50) {
          this.dragTip.text = "释放刷新";
        }
      });
      // 下拉刷新时，松手时触发pulldown事件，并注册刷新结束事件
      // this.scroll.on("touchEnd", pos => {
      //   if (pos.y > 50) {
      //     this.dragTip.text = "刷新中...";
      //     //重新初始化
      //     this.$on("pullrefresh.finishLoad", this.resetParams);
      //     this.$emit("pulldown", pos);
      //   }
      // });

      // 派发滚动到底部事件，用于上拉加载
      // this.scroll.on("scrollEnd", () => {
      //   if (this.scroll.y <= this.scroll.maxScrollY + 50) {
      //     //所有数据加载完毕后
      //     this.$on("infinitescroll.loadedDone", () => {
      //       this.isDone = true;
      //     });
      //     //重新初始化
      //     this.$on("infinitescroll.reInit", () => {
      //       this.isDone = false;
      //     });
      //     this.$emit("pullup"); // 触发pullup事件
      //   }
      // });
    }
  }
};
</script>

<style scoped>
.scroll-wrap {
  width: 100%;
  height: calc(100vh - 50px);
  overflow: hidden;
}
.fl {
  display: inline-block;
}
.fl img {
  vertical-align: middle;
  margin-right: 0.2rem;
}
/* 下拉刷新 */
.pulldown,
.pullup {
  width: 100%;
  height: 50px;
  position: relative;
  color: #888;
}
.clear {
  padding: 10px 0px;
  font-size: 0.28rem;
  position: absolute;
  left: 50%;
  top: 5px;
  transform: translate(-50%, 0);
}
.list-donetip {
  text-align: center;
  line-height: 50px;
  font-size: 0.28rem;
}
</style>
